<template>
  <div class="">
    <div class="table-contain">
      <Table
        height="100%"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
      </Table>
    </div>
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, watch } from "vue";
import Table from "@/components/pageTable/table.ts";
import { ElMessage } from "element-plus";
import Page from "@/components/pageTable/Page.vue";
import { pageSysUser } from "@/api/system.ts";

const tableData = reactive({
  columns: [
    { prop: "userName", label: "昵称", width: 100 },
    { prop: "realName", label: "姓名", width: 100 },
    // { prop: "name", label: "组织", width: 100 },
    { prop: "mobile", label: "电话", width: 120 },
    { prop: "name", label: "组织", width: 220 },
  ],
  loading: true,
  total: 0,
  data: [],
});
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});

//列表分页查询
async function initList(page: number, roleId: any) {
  pageData.pageNum = page || 1;
  let params = {
    pageNum: page || 1,
    pageSize: pageData.pageSize,
    roleId: roleId || "",
  };
  tableData.loading = true;
  const { data, msg, success } = await pageSysUser(params);
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data?.list;
  tableData.total = data?.total;
}
defineExpose({ initList });
onMounted(async () => {
  await initList(1, "");
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/variable";
@import "@/assets/styles/common";
.table-contain {
  width: 100%;
  height: calc($router-component-contain-height - 40px);
}
</style>
